<template>
	<view class="container">
		<view class="address_box" @click="$gourl('/pages/address/addressList')">
			<!-- <image class="dp" src="@/static/order/map.png" mode=""></image> -->
			<view class="address" v-if="!address">
				<view class="big">请选择地址</view>
			</view>
			<view class="address" v-else>
				<view class="big">{{address.username+' '+address.telephone}}</view>
				<view class="small">{{address.province + address.city + address.county + address.adrdetail}}
				</view>
			</view>
			<u-icon name="arrow-right" color="#999"></u-icon>
		</view>
		<view class="ztd_box" style="margin-top: 20rpx;background: #fff;padding: 20rpx;">
			<view class="small_info">
				<image :src="shoppingInfo.pics[0]" mode="aspectFill"></image>
				<view class="infos">
					<view class="name">{{shoppingInfo.item_name}}</view>
					<view class="sku" v-if="shoppingInfo.length>0"><text
							v-for="(sku,inx) in shoppingInfo.spec_items[type].item_spec">{{`${sku.spec_name}:${sku.spec_custom_value_name},`}}</text>
					</view>
					<view class="price" v-if="shoppingInfo.length>0"><text
							class="money">￥{{(shoppingInfo.spec_items[type].price/100).toFixed(2)}}</text>x{{shop_num}}
					</view>
					<view class="price" v-else><text
							class="money">￥{{(shoppingInfo.price/100).toFixed(2)}}</text>x{{shop_num}}
					</view>
				</view>
			</view>
		</view>
		<view class="small_in zj">
			<view class="title">商品总价</view>
			<view class="small">共{{shop_num}}件 实际支付 <text class="price">￥{{totals}}</text></view>
		</view>
		<view class="small_in bz">
			<view class="title">备注留言</view>
			<input type="text" placeholder="选填:请输入您要备注留言得内容" v-model="remark">
		</view>
		<view class="small_in bz" @click="show = true">
			<view class="title">支付方式</view>
			<view>{{payType == 'wxpay'?'微信支付':'余额支付'}}</view>
		</view>
		<view class="small_in bz">
			<view class="title">提货方式</view>
			<view style="display: flex;align-items: center;">
				<u-radio-group v-model="value" @change="radioGroupChange">
					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.type"
						:disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
		</view>
		<view class="footer">
			<view style="font-size: 24rpx;padding-left: 20rpx;">
				实际支付：<text style="color: red;font-weight: bold;">￥<text
						style="font-size: 30rpx;">{{totals}}</text></text>
			</view>
			<view class="pay_bgn" @click="createOrder">立即支付</view>
		</view>
		<u-popup v-model="show" mode="bottom" :closeable="true">
			<view class="mask_box">
				<view class="box_title">请选择支付方式</view>
				<view class="pay" @click="payClick('wxpay')">
					<view class="title">
						<view style="display: flex;align-items: center;">
							<image src="@/static/images/shops/wx.png" mode="aspectFill"></image>
							微信支付
						</view>
					</view>
					<view class="select">
						<image src="@/static/images/shops/select.png" mode="" v-if="payType == 'wxpay'"></image>
						<view class="yuan" v-else></view>
					</view>
				</view>
				<view class="pay" @click="payClick('deposit')">
					<view class="title">
						<view style="display: flex;align-items: center;">
							<image src="@/static/images/shops/yue.png" mode="aspectFill"></image>
							余额支付
						</view>
						<view style="color: #999;margin-top: 10rpx;">
							当前余额{{userInfo.balance}}元,需支付{{totals}}元</view>
					</view>
					<view class="select">
						<image src="@/static/images/shops/select.png" mode="" v-if="payType == 'deposit'"></image>
						<view class="yuan" v-else></view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 1,
				payType: 'deposit',
				shoppingInfo: {},
				main_goods: {},
				goodsItem: [],
				address: null,
				type: '',
				shopArr: '',
				totals: '',
				shop_num: 0,
				isload: 0,
				money: '',
				userInfo: null,
				show: false,
				remark: '',
				list: [{
						name: '自提',
						type: '1',
						disabled: false
					},
					{
						name: '快递',
						type: '0',
						disabled: false
					},
				],
				value: '0'
			}
		},
		onLoad() {
			this.shoppingInfo = JSON.parse(uni.getStorageSync('shopInfo')).data
			this.type = JSON.parse(uni.getStorageSync('shopInfo')).current
			this.shop_num = JSON.parse(uni.getStorageSync('shopInfo')).num
			console.log(this.shoppingInfo);
			if (this.shoppingInfo.spec_items.length > 0) {
				this.totals = ((this.shoppingInfo.spec_items[this.type].price / 100) * Number(this.shop_num)).toFixed(2)
			} else {
				this.totals = ((this.shoppingInfo.price / 100) * Number(this.shop_num)).toFixed(2)
			}
			this.getUserInfo()
		},
		onShow() {
			if (getApp().selectAddress) {
				this.address = JSON.parse(getApp().selectAddress)
			}
		},
		methods: {
			getUserInfo() {
				this.$allApi.getUserInfo().then(res => {
					console.log(res);
					this.userInfo = res.data.memberInfo
				})
			},
			getData() {
				uni.showLoading({
					title: '加载中...'
				})
				this.$u.api.payPres({
					goods_list: this.shoppingInfo,
					from: this.type,
					address_id: 0,
					coupons_id: 0,
				}).then(res => {
					console.log(res.data.total_fee)
					this.totals = res.data.total_fee
					this.shopArr = res.data.new_goods_list
					this.isload++
					uni.hideLoading()
				})
			},
			valChange(group_id, e, goods_id) {
				for (let item of this.shoppingInfo) {
					if (item.group_id == group_id) {
						if (item.num) {
							item.num = e.value
						} else {
							for (let item2 of item.goods_list) {
								if (goods_id == item2.goods_id) {
									item2.goods_num = e.value
								}
							}
						}
					}
				}
				if (this.isload > 0) {
					console.log(this.isload)
					this.getData()
				}

			},
			payClick(type) {
				this.payType = type
				this.show = false
			},
			createOrder() {
				if (!this.address) {
					this.$u.toast('请选择收获地址')
					return
				}
				uni.showLoading({
					title: '订单生成中'
				})
				// let shopArr = []
				// for (let item of this.shoppingInfo) {
				// 	shopArr.push({
				// 		item_id: item.item_id,
				// 		num: item.num
				// 	})
				// }
				let item_id = 0
				if (this.shoppingInfo.spec_items.length > 0) {
					item_id = this.shoppingInfo.spec_items[this.type].item_id
				} else {
					item_id = this.shoppingInfo.item_id
				}
				let data = {
					// items: shopArr,
					item_id: item_id,
					item_num: this.shop_num,
					receipt_type: 'logistics',
					receiver_name: this.address.username,
					receiver_mobile: this.address.telephone,
					receiver_state: this.address.province,
					receiver_city: this.address.city,
					receiver_district: this.address.county,
					receiver_address: this.address.adrdetail,
					cart_type: 'fastbuy',
					order_type: 'normal',
					shop_id: 0,
					pay_type: this.payType,
					remark: this.remark

				}
				this.$allApi.createOrder(data).then(orderRes => {
					uni.hideLoading()
					this.$u.toast('下单成功')
					uni.removeStorageSync('orderPayData')
					this.$gourl('/pages/index/order', 3)
				})
			},
			// payClick() {
			// 	let that = this
			// 	if (this.address == '') {
			// 		this.$u.toast('请选择收货地址')
			// 		return
			// 	}
			// 	this.$u.api.createOrder({
			// 		goods_list: this.shoppingInfo,
			// 		from: this.type,
			// 		address_id: this.address.id
			// 	}).then(res => {
			// 		if (this.payType == 'wechat') {
			// 			this.$u.api.goPrepay({
			// 				order_sn: res.data.order_sn,
			// 				payment: this.payType,
			// 			}).then(res => {
			// 				console.log(res.data.pay_data)
			// 				let pay = res.data.pay_data
			// 				uni.requestPayment({
			// 					timeStamp: pay.timeStamp,
			// 					nonceStr: pay.nonceStr,
			// 					package: pay.package,
			// 					signType: pay.signType,
			// 					paySign: pay.paySign,
			// 					// 支付成功的回调
			// 					success(result) {
			// 						console.log(result)
			// 						if (result.errMsg == "requestPayment:ok") {
			// 							uni.showToast({
			// 								icon: "success",
			// 								title: "购买成功！"
			// 							})
			// 							setTimeout(() => {
			// 								that.$gourl('/order/orderGoods/order', 3)
			// 							}, 2000)
			// 						}

			// 					},
			// 					// 支付失败回调
			// 					fail(err) {
			// 						uni.showToast({
			// 							icon: "none",
			// 							title: "支付失败"
			// 						})
			// 					}
			// 				})
			// 			})
			// 		} else {
			// 			this.$u.api.goPrepay({
			// 				order_sn: res.data.order_sn,
			// 				payment: this.payType
			// 			}).then(res => {
			// 				this.$u.toast('支付成功')
			// 				setTimeout(() => {
			// 					this.$gourl('/order/orderGoods/order', 2)
			// 				}, 2000)
			// 			})
			// 		}
			// 	})
			// }
		}
	}
</script>

<style scoped lang="scss">
	.yuan {
		width: 48rpx;
		height: 48rpx;
		border: 1px solid #aaa;
		border-radius: 50%;
	}

	.container {
		// #ifdef H5
		min-height: calc(100vh - 120rpx - 44px);
		// #endif
		// #ifndef H5
		min-height: 100vh;
		padding-bottom: 120rpx;
		// #endif
		background: #f6f6f6;
	}

	.top_box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background: #fff;
		border-bottom: 1px solid #eee;

		.dp {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		.address {
			flex: 1;
			margin-right: 20rpx;
			width: 534rpx;
			line-height: 1.5;

			.big {
				font-size: 30rpx;
			}

			.small {
				color: #999;
				font-size: 24rpx;
			}
		}

		.dh {
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #01c65d;

			image {
				width: 35rpx;
				height: 35rpx;
				margin-right: 6rpx;
			}
		}
	}

	.address_box {
		// #ifdef MP
		margin-top: 20rpx;
		// #endif
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx;
		background: #fff;

		.dp {
			width: 40rpx;
			height: 40rpx;
			margin-right: 20rpx;
		}

		.address {
			flex: 1;
			margin-right: 20rpx;
			width: 534rpx;
			line-height: 1.5;

			.big {
				font-size: 30rpx;
			}

			.small {
				color: #999;
				font-size: 24rpx;
			}
		}
	}

	.small_info {
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {
			width: 130rpx;
			height: 130rpx;
			border-radius: 10rpx;
		}

		.infos {
			flex: 1;
			padding-left: 20rpx;
			width: 596rpx;
			line-height: 1.8;

			.name {
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}

			.sku {
				color: #666;
			}
		}

		.price {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 24rpx;
			color: #999;

			.money {
				font-weight: bold;
				font-size: 28rpx;
				color: red;
			}
		}
	}

	.miaosu {
		font-size: 24rpx;
		color: #999;
	}

	.small_in {
		background: #fff;
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		text-align: center;
		padding: 20rpx;
		line-height: 80rpx;
		margin-bottom: 1px;

		.small {
			font-size: 26rpx;
		}
	}

	.zj {
		.price {
			font-weight: bold;
			color: red;
		}
	}

	.bz {
		display: flex;
		align-items: center;
		justify-content: space-between;

		input {
			width: 500rpx;
			text-align: left;
		}
	}

	.mask_box {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.box_title {
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid #eee;
		font-size: 32rpx;
		padding: 30rpx 0;
	}

	.pay {
		display: flex;
		align-items: center;
		height: 120rpx;
		padding: 30rpx;
		justify-content: space-between;
		background: #fff;
		margin-bottom: 1px;

		.title {
			font-size: 30rpx;
			// display: flex;
			// align-items: center;

			image {
				width: 44rpx;
				height: 44rpx;
				margin-right: 20rpx;
			}
		}

		.select {
			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}

	.footer {
		position: fixed;
		z-index: 99;
		background: #fff;
		width: 100vw;
		height: 120rpx;
		left: 0;
		bottom: 0;
		border-top: 1px solid #eee;
		padding-bottom: calc(-30rpx + env(safe-area-inset-bottom));
		display: flex;
		justify-content: space-between;
		align-items: center;

		.pay_bgn {
			width: 220rpx;
			height: 80rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			background: #01c65d;
		}
	}
</style>